<template>
  <div class="pet-card">
    <el-card :body-style="{ padding: '0px' }" class="card">
      <div class="card-img-container">
        <img :src="petImageUrl" class="card-img" :alt="pet.name" v-img-fallback="'https://via.placeholder.com/200x200?text=Pet+Image'">
        <span v-if="pet.is_adopted" class="adopted-badge">已领养</span>
      </div>
      <div class="card-body">
        <h3 class="card-title">{{ pet.name }}</h3>
        <div class="pet-info">
          <p>
            <span class="info-label">类别:</span>
            <span class="info-value">{{ pet.category_name }}</span>
          </p>
          <p>
            <span class="info-label">品种:</span>
            <span class="info-value">{{ pet.breed || '未知' }}</span>
          </p>
          <p>
            <span class="info-label">性别:</span>
            <span class="info-value">{{ formatGender(pet.gender) }}</span>
          </p>
          <p>
            <span class="info-label">年龄:</span>
            <span class="info-value">{{ formatAge(pet.age) }}</span>
          </p>
        </div>
        <div class="card-actions">
          <router-link :to="'/pets/' + pet.id">
            <el-button type="primary" plain>查看详情</el-button>
          </router-link>
          <router-link v-if="!pet.is_adopted && isLoggedIn" :to="'/pets/' + pet.id + '/adopt'">
            <el-button type="success">申请领养</el-button>
          </router-link>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getImageUrl } from '@/utils/image'

export default {
  name: 'PetCard',
  props: {
    pet: {
      type: Object,
      required: true
    }
  },
  computed: {
    ...mapGetters({
      isLoggedIn: 'auth/isAuthenticated'
    }),
    petImageUrl() {
      return getImageUrl(this.pet.image_url)
    }
  },
  methods: {
    formatGender(gender) {
      const genderMap = {
        'male': '公',
        'female': '母',
        'unknown': '未知'
      }
      return genderMap[gender] || '未知'
    },
    formatAge(age) {
      if (!age) return '未知'
      return `${age} 岁`
    }
  }
}
</script>

<style lang="scss" scoped>
.pet-card {
  height: 100%;
}

.card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-img-container {
  position: relative;
  overflow: hidden;
}

.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s;
}

.card:hover .card-img {
  transform: scale(1.05);
}

.adopted-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.8rem;
}

.card-body {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.card-title {
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--secondary-color);
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.pet-info {
  margin-bottom: 15px;
  flex-grow: 1;
  
  p {
    margin: 8px 0;
    display: flex;
  }
  
  .info-label {
    font-weight: bold;
    width: 50px;
    color: var(--gray-color);
  }
  
  .info-value {
    flex-grow: 1;
  }
}

.card-actions {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}
</style> 